import React from 'react'

// antd component
import {
  Card,
  WhiteSpace,
  Icon,
  Popover,
} from 'antd-mobile';

import styles from './index.less'

function Title({
  title,
}) {
  return (
    <div className={styles.card_title}>
      {title}
    </div>
  )
}

class Extra extends React.Component {
  state = {
    visible: false,
    selected: '',
  };

  onSelect = (opt) => {
    this.setState({
      visible: false,
      selected: opt.props.value,
    });
  };

  handleVisibleChange = (visible) => {
    this.setState({
      visible,
    });
  };

  render() {
    const {
      extra,
      options,
      icon,
      showPop,
    } = this.props

    return (
      <div className={styles.card_extra}>
        <Popover
          mask={showPop}
          // overlayClassName="fortest"
          overlayStyle={{ color: 'currentColor' }}
          visible={this.state.visible}
          overlay={options}
          align={{
            overflow: { adjustY: 0, adjustX: 0 },
            offset: [-10, 0],
          }}
          onVisibleChange={this.handleVisibleChange}
          onSelect={this.onSelect}
        >
          <div style={{
            height: '100%',
            padding: '0 15px',
            marginRight: '-15px',
            display: 'flex',
            alignItems: 'center',
          }}
          >
            <span>{extra}</span>
            {/* TODO 切换应该是 down 吧 */}
            <Icon type={icon ? icon : 'down'} size='lg' />
          </div>
        </Popover>
      </div>
    )
  }
}

export default class MyCard extends React.Component {
  render() {
    const {
      children,
      title,
      thumb,
      extra,
      showRight,
      options,
      icon,
      showPop,
    } = this.props

    return (
      <div>
        <WhiteSpace size="lg" />
        <Card full>
          <Card.Header
            title={<Title
              title={title} />}
            thumb={thumb}
            extra={showRight ? (
              <Extra
                extra={extra}
                options={options}
                icon={icon}
                showPop={showPop}
              />
            ) : null}
          />
          <Card.Body>
            {children}
          </Card.Body>
        </Card>
      </div>
    )
  }
}